<template>
  <el-popover v-model="show" placement="bottom-start" trigger="click">
    <template>
      <p class="mb8 c-red" v-show="!date">请先选择日期：</p>
      <el-date-picker
        class="mb8"
        size="small"
        v-model="date"
        type="month"
        format="yyyy年MM月"
        value-format="yyyy-MM"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <p class="flex-justify-end">
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </p>
    </template>
    <el-button size="small" slot="reference" :loading="loading">{{title}}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
  </el-popover>
</template>

<script>
export default {
  props:['title'],
  data() {
    return {
      date: "",
      show: false,
      loading: false,
      pickerOptions: {
        disabledDate(time) {
          let date = new Date()
          let year = date.getFullYear()
          let month = date.getMonth()
          let str = year + '-' + (month + 1) + '-' + 1
          let newDate = new Date(str)
          return time.getTime() >= newDate.getTime()
        }
      }
    }
  },
  methods: {
    submit() {
      if(this.loading) return
      if(this.date){
        this.$emit('onSubmit',this.date)
        this.show = false
        this.date = ""
      }
    },
  },
};
</script>

<style>
</style>